// 滚动组件
import { defineComponent } from 'vue';
import './style.scss';

export default defineComponent({
  name: 'Marquee',
  props: {
    defualtStyle: Object,
  },
  render({ $slots }) {
    const content = $slots.default?.() ?? '';
    const strLength = content[0].children?.length ?? 0;
    const width = strLength * 16 + 'px';

    const styleSheet = document.styleSheets[0];
    const keyframes = `@keyframes marq {
        from {
			left: 100%; 
		}
		to {
			left: -${width}; 
		}
    }`;

    styleSheet.insertRule(keyframes, styleSheet.cssRules.length);

    return (
      <div id="Marquee">
        <p
          class="content"
          style={{
            width,
            animationDuration: strLength / 4 + 's',
          }}
        >
          {content}
        </p>
      </div>
    );
  },
});
